<template>
  <a-card title="环境监测基本统计分析">
    <!-- 导航栏 -->
    <a-tabs v-model="activeTab" style="margin-bottom: 20px">
      <a-tab-pane key="water" tab="水质"></a-tab-pane>
      <a-tab-pane key="air" tab="空气"></a-tab-pane>
      <a-tab-pane key="noise" tab="噪音"></a-tab-pane>
      <a-tab-pane key="soil" tab="土壤"></a-tab-pane>
      <a-tab-pane key="specific" tab="特定污染物"></a-tab-pane>
    </a-tabs>
  </a-card>
  <a-row :gutter="16">
    <!-- 左侧：监测点树形结构 -->
    <a-col span="8">
      <a-card title="监测点树形结构">
        <a-tree
          :treeData="treeData"
          checkable
          defaultCheckedKeys="['1']"
          checkStrictly
          v-model:checkedKeys="selectedKeys"
          :fieldNames="{ key: 'id', title: 'name' }"
          style="height: 960px"
        />
      </a-card>
    </a-col>

    <!-- 右侧：统计分析区域 -->
    <a-col span="16">
      <a-card title="统计分析区域">
        <!-- 时间区间选择 -->
        <a-form layout="inline" @submit.prevent="handleQuery">
          <a-form-item label="起始日期">
            <a-date-picker v-model="startDate" placeholder="选择起始日期" />
          </a-form-item>
          <a-form-item label="结束日期">
            <a-date-picker v-model="endDate" placeholder="选择结束日期" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">查询</a-button>
          </a-form-item>
        </a-form>

        <!-- 数据列表展示 -->
        <a-table :columns="columns" :dataSource="dataList" rowKey="id" style="margin-top: 20px">
          <template #action="{ record }">
            <a-button @click="handleViewDetails(record)" type="link">查看详情</a-button>
          </template>
        </a-table>
      </a-card>
      <!-- 数据曲线图展示 -->
      <a-card title="数据列表展示">
        <div class="chart" style="height: 400px">
          <Echart :option="chartOptions" name="chartOptions" />
        </div>

        <!-- 同比、环比选项 -->
        <a-checkbox-group v-model="compareOptions">
          <a-checkbox value="yearOnYear">同比</a-checkbox>
          <a-checkbox value="monthOnMonth">环比</a-checkbox>
        </a-checkbox-group>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
  // 引入 Vue 的 ref
  import { ref, computed } from 'vue';
  import Echart from '/@/components/e-chart.vue'; // 确保路径正确

  // 定义变量
  const activeTab = ref('water'); // 当前选中的标签
  const startDate = ref(null); // 起始日期
  const endDate = ref(null); // 结束日期
  const selectedKeys = ref(['1']); // 选中的监测点
  const treeData = ref([
    // 监测点树形结构数据
    {
      id: '1',
      name: '监测点A',
      children: [
        { id: '1-1', name: '子监测点A1' },
        { id: '1-2', name: '子监测点A2' },
      ],
    },
    {
      id: '2',
      name: '监测点B',
      children: [
        { id: '2-1', name: '子监测点B1' },
        { id: '2-2', name: '子监测点B2' },
      ],
    },
    // 你可以添加更多监测点
  ]);

  // 表格列配置
  const columns = [
    { title: '点ID', dataIndex: 'id', key: 'id' },
    { title: '点名', dataIndex: 'name', key: 'name' },
    { title: '时间', dataIndex: 'time', key: 'time' },
    { title: '值', dataIndex: 'value', key: 'value' },
    { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
  ];

  // 数据列表
  const dataList = ref([
    { id: 1, name: '监测点A', time: '2024-10-01', value: 23 },
    { id: 2, name: '监测点B', time: '2024-10-01', value: 34 },
    { id: 3, name: '监测点A', time: '2024-10-02', value: 45 },
    { id: 4, name: '监测点B', time: '2024-10-02', value: 56 },
    // 你可以添加更多数据
  ]);

  const compareOptions = ref([]); // 用于存储同比、环比的选项

  // 查询按钮点击事件
  const handleQuery = () => {
    console.log('查询数据:', { startDate: startDate.value, endDate: endDate.value, selectedKeys: selectedKeys.value });
    // 根据选中的日期和监测点，执行查询操作，更新数据列表
  };

  // 查看详情按钮点击事件
  const handleViewDetails = (record) => {
    console.log('查看详情:', record);
  };

  const chartOptions = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['监测点A', '监测点B'],
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2024-10-01', '2024-10-02', '2024-10-03', '2024-10-04'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '监测点A',
          type: 'line',
          stack: '总量',
          data: [23, 45, 56, 67],
          smooth: true,
        },
        {
          name: '监测点B',
          type: 'line',
          stack: '总量',
          data: [34, 56, 78, 89],
          smooth: true,
        },
      ],
    };
  });
</script>

<style scoped>
  .ant-card {
    margin-bottom: 20px; /* 卡片底部间距 */
  }

  .ant-input,
  .ant-select,
  .ant-checkbox-group {
    width: 100%; /* 输入框、选择框和复选框组宽度100% */
  }

  .ant-table {
    margin-top: 20px; /* 表格顶部间距 */
  }

  .ant-row {
    margin-bottom: 20px; /* 行底部间距 */
  }

  .echarts-container {
    height: 300px; /* 设置图表容器高度 */
  }
</style>
